@charset "utf-8";
//*****************************************************公共嵌入的函数*********************************************************//

//初始化所有样式函数
@mixin init-style(){
  /*重置浏览器默认样式*/
  body, p, h1, h2, h3, h4, h5, h6, ul, ol, dl, dd, form, hr, input, textarea, select, button{ margin: 0; }
  ul, ol, option, input, textarea, select, button{ padding: 0; }
  article, aside, footer, header, hgroup, main, nav, section, figure, li{ display: block; }
  input, textarea, select, button, iframe{ border: 1px solid gray; }
  input, textarea, select, button{ outline: none; }
  table{ border-collapse:collapse; border-spacing:0; border: 0; }
  ul, ol{ list-style-type: none; }
  a{ text-decoration:none; cursor:pointer; }
  abbr,acronym{ border:0; font-variant:normal; }
  del{ text-decoration:line-through; }

  /*基本的初始化样式*/
  html {
    font-size: 100%; /*用来防止IE和Opera浏览器下的Bug*/
    overflow:auto;/*隐藏滚动，垂直滚动根据内容自适应（去除IE默认垂直滚动条）*/
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    height: 100%;/*在IE下body的百分高度需要在html设置此值*/
  }
  body{
    -webkit-font-smoothing: antialiased;
  }
  input, textarea, select, button{
    outline: none; //取消input框光晕
  }
  fieldset, img{ /*IE下img标签被a标签嵌套时，img标签就会有边框*/
    border: 0;
  }
  a img,img{ /*解决图片在IE7以及IE6下的缩放影响图片质量的问题*/
    -ms-interpolation-mode: bicubic;
  }
  q:before, q:after {
    content: '';
  }
  i{ /*i标签让内容斜体，根据具体使用情况判断是否需要初始化为不倾斜*/
    font-style: normal;
  }
  //a,area { blr:expression(this.onFocus=this.blur()) } /* 去掉链接时的虚框 for IE */
  a:focus , area:focus { /* 去掉链接时的虚框 for Firefox */
    -moz-outline-style: none;
  }
  a {
    cursor: pointer;
    text-decoration: none;
  }
  //去除点击时候得阴影
  a:active , li:active {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -moz-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -ms-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    -o-tap-highlight-color: rgba(0, 0, 0, 0) !important;
    tap-highlight-color: rgba(0, 0, 0, 0) !important;
  }
}

//************************************************************
//    @除以2函数
//************************************************************/
@function rpx($parameter) {
  @return ($parameter/75) * 1rem;
}

//************************************************************
//    @描述性的文本字号转换
//    参数1:设计稿文字字号大小;
//************************************************************/
@mixin font-dpr($font-size) {
  font-size: $font-size;
  [data-dpr="2"] & {
    font-size: $font-size * 2;
  }
  [data-dpr="3"] & {
    font-size: $font-size * 3;
  }
}

//************************************************************
//    @多行文本溢出隐藏
//    参数1:多少行开始隐藏文字;
//************************************************************/
@mixin multiLineTextHidden($num){
  word-break:break-all;
  display:-webkit-box;
  display:-o-box;
  display:-moz-box;
  display:box;
  -webkit-line-clamp:$num;
  -moz-line-clamp:$num;
  -o-line-clamp:$num;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  -o-box-orient:vertical;
  overflow:hidden;
}

//************************************************************
//    @透明度
//      参数1:透明度的值，0为最小，100为最大;
//
//************************************************************/
@mixin createOpacity($num){
  filter:alpha(opacity=$num);
  -moz-opacity:($num/100);
  -khtml-opacity: ($num/100);
  opacity: ($num/100);
}

//************************************************************
//    @嵌入字体链接样式
//      参数1:还没被划过时候的a标签的颜色;
//      参数2:划过后a标签的颜色;
//************************************************************/
@mixin linkStyle($color, $hoverColor, $isHaveUnderlined) {
  color: $color;
  text-decoration: none;

  &:hover {
    color: $hoverColor;

    @if ($isHaveUnderlined==true) {
      text-decoration: underline;
    } @else {
      text-decoration: none;
    }
  }
}

//************************************************************
//    @input中placeholder添加颜色;
//************************************************************/
@mixin placeHolderColor($color) {

  &::-webkit-input-placeholder { /* WebKit browsers */
    color: $color;
  }
  &:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: $color;
  }
  &::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: $color;
  }
  &:-ms-input-placeholder { /* Internet Explorer 10+ */
    color: $color;
  }
}

//************************************************************
//    @添加箭头样式
//      参数1:箭头样式的名字;
//      参数2:箭头的大小;
//      参数3:箭头的颜色;
//      参数3:箭头的方向;
//************************************************************/
@mixin createJt($name,$size,$color,$direction){
   
        %#{$name}_#{$direction}{
            width: 0px;
            height: 0px;
            display: block;
            font-size: 0px;
            line-height: 0px;
            position: absolute;

            @if($direction=="top"){
                border-top: none;
                border-bottom: $size+px solid $color;
                border-left: $size+px solid transparent;
                border-right: $size+px solid transparent;
                
            }@else if($direction=="bottom"){
                border-top: $size+px solid $color;
                border-bottom: none;
                border-left: $size+px solid transparent;
                border-right: $size+px solid transparent;
                
            }@else if($direction=="left"){
                border-top: $size+px solid transparent;
                border-bottom: $size+px solid transparent;
                border-left:none;
                border-right: $size+px solid $color;
            }@else if($direction=="right"){
                border-top: $size+px solid transparent;
                border-bottom: $size+px solid transparent;
                border-left: $size+px solid $color;
                border-right: none;
            }  
            
        } 
        .#{$name}_#{$direction}{
            @extend %#{$name}_#{$direction};
        }    
}

//************************************************************
//    @设置字体可缩放,注意,使用这个的时候,必须在html这个标签上加上font-size:62.5%这个样式;
//      
//************************************************************/
@mixin autoFontSize($size){
    font-size: $size+px;
    font-size: ($size/10)+rem;
}


//************************************************************
//    @超级高,可以上线居中行距
//      参数1:高度的值，行高的值;
//      
//************************************************************/
@mixin sHeight($height){
    height: $height+px;
    line-height: $height+px;
}

//************************************************************
//    @继承样式
//      参数1:继承者,该参数为list类型;
//      参数2:被继承者,该参数为list类型;
//************************************************************/
@mixin successor($inHeritance,$beInherited){

  @each $beInherited-obj in $beInherited{
    .#{$beInherited-obj}{
      @each $inHeritance-obj in $inHeritance {
        @extend %#{$inHeritance-obj};
      }
    }
  }
}

//************************************************************
//    @调用动画函数;
//     参数1为动画的名字;
//     参数2为动画的时间，以秒作为单位;
//     参数3为缓冲动画值，具体可参考w3c中的animate有什么缓冲动画值(如:ease-in);
//************************************************************/
@mixin  getAnimate($animateName,$time,$swing){
  -webkit-animation:#{$animateName} #{$time}s #{$swing};
  -moz-animation:#{$animateName} #{$time}s #{$swing};
  -o-animation:#{$animateName} #{$time}s #{$swing};
  -ms-animation:#{$animateName} #{$time}s #{$swing};
  animation:#{$animateName} #{$time}s #{$swing};
}

//************************************************************
//    @设置动画函数;
//    参数1为动画的名字;
//    参数2为默认的样式状态，此为一个list集合;
//    参数3为改变后的样式状态，此为一个list集合;
//    使用例子: @include setAnimate("myAnimate",(opacity: 0),(opacity:1));
//************************************************************/
@mixin  setAnimate($animateName,$defaultState,$changeState){

  @-webkit-keyframes #{$animateName}{
    0%{
      @each $default_styleName, $default_styleContent in $defaultState{
        #{$default_styleName} : $default_styleContent;
      }
    }
    100%{
      @each $change_styleName, $change_styleContent in $changeState{
        #{$change_styleName} : $change_styleContent;
      }
    }
  }
  @-moz-keyframes #{$animateName}{
    0%{
      @each $default_styleName, $default_styleContent in $defaultState{
        #{$default_styleName} : $default_styleContent;
      }
    }
    100%{
      @each $change_styleName, $change_styleContent in $changeState{
        #{$change_styleName} : $change_styleContent;
      }
    }
  }
  @-o-keyframes #{$animateName}{
    0%{
      @each $default_styleName, $default_styleContent in $defaultState{
        #{$default_styleName} : $default_styleContent;
      }
    }
    100%{
      @each $change_styleName, $change_styleContent in $changeState{
        #{$change_styleName} : $change_styleContent;
      }
    }
  }
  @-ms-keyframes #{$animateName}{
    0%{
      @each $default_styleName, $default_styleContent in $defaultState{
        #{$default_styleName} : $default_styleContent;
      }
    }
    100%{
      @each $change_styleName, $change_styleContent in $changeState{
        #{$change_styleName} : $change_styleContent;
      }
    }
  }
  @keyframes #{$animateName}{
    0%{
      @each $default_styleName, $default_styleContent in $defaultState{
        #{$default_styleName} : $default_styleContent;
      }
    }
    100%{
      @each $change_styleName, $change_styleContent in $changeState{
        #{$change_styleName} : $change_styleContent;
      }
    }
  }
}

//************************************************************
//    @自定义栅格网格系统
//      参数1:为网格的样式class名;
//      参数2:为网格总共有多少列;
//      参数3:为网格的长宽，该参数为一个list类型;
//      参数4:为子网格的属性，子网格参数1为子网格的索引，参数2为子网格的宽，参数3为子网格的高度，该参数是一个多维的list类型;
//      使用方法例子：@include grid_layout_forPc("tm",1,(1000,400),((1,200,50),(2,300,50),(3,400,50)));
//************************************************************
@mixin grid_layout_forPc($rowName,$rowNum,$thisList,$list){

  $rowWidth:nth($thisList,1);
  $rowHeight:nth($thisList,2);
  $isNull:"false";

  .#{$rowName}-row-#{$rowNum}:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  } 

  .#{$rowName}-row-#{$rowNum}{                      //row-XX 容器，注意XX也是约定
    width: $rowWidth+px;
    display:block;
    @if($rowHeight==auto){
        height: 1%;
    }@else{
        height:$rowHeight+px;
    }
      
    @each $num, $width,$height in $list {   //假如只有一个col的时候，$width会显示null;
          @if($width==null){
              $isNull:"true";
          }
    }
    
    @if($isNull=="true"){
        .#{$rowName}-col-#{nth($list,1)}{
          width: nth($list,2)+px;
          _dispaly:inline;
          @if(nth($list,3)==auto){
              height: auto;
          }@else{
              height: nth($list,3)+px;
          }
        }  
    }@else{
        @each $num, $width,$height in $list {
          $rowWidth: $rowWidth - $width;    //计算总长度减去所有列数的宽度*/
        }
        $rowWidth : $rowWidth  /  (length($list)-1);      //把减出来的剩下的平均分配给margin-left值（注意第一个除外）
        @each $num, $width, $height in $list{             //动态的拿取$list数组中的值,并把对应的值付给对应的子div的width*
         .#{$rowName}-col-#{$num}{
           width: $width+px;
           height: $height+px;
           float: left;
           _dispaly:inline;

           @if($num != 1){                               //第一个并不需要赋margin-left值;
             @if($rowWidth < 0){
              margin-left:0 + px;
             }@else{
              margin-left:round($rowWidth) + px;
            }
          }
        }
      }
    }
  }
}

//************************************************************
//    @弹性布局初始化
//************************************************************/
@mixin  flexBoxInit(){
  //旧版声明
  display:-webkit-box;
  display:-o-box;
  display:-moz-box;
  display:-ms-box;
  display:box;
  //过渡班声明
  display:-webkit-flexbox;
  display:-o-flexbox;
  display:-moz-flexbox;
  display:-ms-flexbox;
  display:flexbox;
  //新版声明
  display:-webkit-flex;
  display:-o-flex;
  display:-moz-flex;
  display:-ms-flex;
  display:flex;
}

//************************************************************
//    @弹性布局的流动方向--可分垂直流动和左右流动
//    参数为1时候是左右流动;
//    参数为2时候是垂直流动;
//************************************************************/
@mixin flexBoxOrient($parameter){

  @if($parameter==1){

    -webkit-box-orient:horizontal;
    -o-box-orient:horizontal;
    -moz-box-orient:horizontal;
    -ms-box-orient:horizontal;
    box-orient:horizontal;

    -webkit-flex-direction: row;
    -o-flex-direction: row;
    -moz-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;

  }@else if($parameter==2){

    -webkit-box-orient:vertical;
    -o-box-orient:vertical;
    -moz-box-orient:vertical;
    -ms-box-orient:vertical;
    box-orient:vertical;

    -webkit-flex-direction: column;
    -o-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;

  }
}

//************************************************************
//    @弹性布局的流动顺序(注意,这个低版本支持不太好)
//    参数为1时候是正常顺序;
//    参数为2时候是逆向顺序;
//************************************************************/
@mixin flexBoxDirection($parameter){

  @if($parameter==1){

    -webkit-box-direction: normal;
    -o-box-direction: normal;
    -moz-box-direction: normal;
    -ms-box-direction: normal;
    box-direction: normal;


  }@else if($parameter==2){

    -webkit-box-direction: reverse;
    -o-box-direction: reverse;
    -moz-box-direction: reverse;
    -ms-box-direction: reverse;
    box-direction: reverse;

  }
}

//************************************************************
//    @弹性布局的伸缩分布(注意,设置这个的时候必须有一个固定的宽度)
//    参数为left向左边靠;
//    参数为right向右边靠;
//    参数为center向中间靠;
//    参数为justify平均分布;
//************************************************************/
@mixin flexBoxPack($parameter){

  @if($parameter=='left'){

    -webkit-box-pack: start;
    -o-box-pack: start;
    -moz-box-pack: start;
    -ms-box-pack: start;
    box-pack: start;

    -webkit-flex-pack:start;
    -o-flex-pack:start;
    -moz-flex-pack:start;
    -ms-flex-pack:start;
    flex-pack:start;

    -webkit-justify-content: flex-start;
    -o-justify-content: flex-start;
    -moz-justify-content: flex-start;
    -ms-justify-content: flex-start;
    justify-content: flex-start;

  }@else if($parameter=='right'){

    -webkit-box-pack: end;
    -o-box-pack: end;
    -moz-box-pack: end;
    -ms-box-pack: end;
    box-pack: end;

    -webkit-flex-pack:end;
    -o-flex-pack:end;
    -moz-flex-pack:end;
    -ms-flex-pack:end;
    flex-pack:end;

    -webkit-justify-content: flex-end;
    -o-justify-content:flex-end;
    -moz-justify-content:flex-end;
    -ms-justify-content: flex-end;
    justify-content: flex-end;

  }@else if($parameter=='center'){

    -webkit-box-pack:center;
    -o-box-pack: center;
    -moz-box-pack: center;
    -ms-box-pack: center;
    box-pack: center;

    -webkit-flex-pack:center;
    -o-flex-pack:center;
    -moz-flex-pack:center;
    -ms-flex-pack:center;
    flex-pack:center;

    -webkit-justify-content: center;
    -o-justify-content:center;
    -moz-justify-content:center;
    -ms-justify-content: center;
    justify-content: center;

  }@else if($parameter=='justify'){

    -webkit-box-pack:justify;
    -o-box-pack: justify;
    -moz-box-pack: justify;
    -ms-box-pack: justify;
    box-pack: justify;

    -webkit-flex-pack:justify;
    -o-flex-pack:justify;
    -moz-flex-pack:justify;
    -ms-flex-pack:justify;
    flex-pack:justify;

    -webkit-justify-content: space-between;
    -o-justify-content:space-between;
    -moz-justify-content:space-between;
    -ms-justify-content: space-between;
    justify-content: space-between;
  }
}

//************************************************************
//    @弹性布局的处理额为多余的空间
//    参数为left向左边靠;
//    参数为right向右边靠;
//    参数为center向中间靠;
//    参数为justify平均分布;
//************************************************************/
@mixin floxBoxAlign($parameter){

  @if($parameter=='normal'){

    -webkit-box-align: stretch;
    -o-box-align: stretch;
    -moz-box-align: stretch;
    -ms-box-align: stretch;
    box-align: stretch;

    -webkit-flex-align:stretch;
    -o-flex-align:stretch;
    -moz-flex-align:stretch;
    -ms-flex-align:stretch;
    flex-align:stretch;

    -webkit-align-items: stretch;
    -o-align-items: stretch;
    -moz-align-items: stretch;
    -ms-align-items: stretch;
    align-items: stretch;

  }@else if($parameter=='top'){

    -webkit-box-align: end;
    -o-box-align: end;
    -moz-box-align: end;
    -ms-box-align: end;
    box-align: end;

    -webkit-flex-align:end;
    -o-flex-align:end;
    -moz-flex-align:end;
    -ms-flex-align:end;
    flex-align:end;

    -webkit-align-items: flex-end;
    -o-align-items: flex-end;
    -moz-align-items: flex-end;
    -ms-align-items: flex-end;
    align-items: flex-end;

  }@else if($parameter=='bottom'){

    -webkit-box-align: start;
    -o-box-align: start;
    -moz-box-align: start;
    -ms-box-align: start;
    box-align: start;

    -webkit-flex-align:start;
    -o-flex-align:start;
    -moz-flex-align:start;
    -ms-flex-align:start;
    flex-align:start;

    -webkit-align-items: flex-start;
    -o-align-items: flex-start;
    -moz-align-items: flex-start;
    -ms-align-items: flex-start;
    align-items: flex-start;

  }@else if($parameter=='center'){

    -webkit-box-align: center;
    -o-box-align: center;
    -moz-box-align: center;
    -ms-box-align: center;
    box-align: center;

    -webkit-flex-align:center;
    -o-flex-align:center;
    -moz-flex-align:center;
    -ms-flex-align:center;
    flex-align:center;

    -webkit-align-items: center;
    -o-align-items: center;
    -moz-align-items: center;
    -ms-align-items: center;
    align-items: center;

  }@else if($parameter=='baseline'){

    -webkit-box-align: baseline;
    -o-box-align: baseline;
    -moz-box-align: baseline;
    -ms-box-align: baseline;
    box-align: baseline;

    -webkit-flex-align:baseline;
    -o-flex-align:baseline;
    -moz-flex-align:baseline;
    -ms-flex-align:baseline;
    flex-align:baseline;

    -webkit-align-items: baseline;
    -o-align-items: baseline;
    -moz-align-items: baseline;
    -ms-align-items: baseline;
    align-items: baseline;
  }
}

//************************************************************
//    @弹性布局的设置子节点所占的比例;
//    是一个浮点数,1为所占100%,2为所占200%;
//************************************************************/
@mixin flexBoxProportion($parameter){
  -webkit-box-flex: $parameter;
  -o-box-flex: $parameter;
  -moz-box-flex: $parameter;
  -ms-box-flex: $parameter;
  box-flex: $parameter;

  -wekit-flex:$parameter;
  -o-flex:$parameter;
  -moz-flex:$parameter;
  -ms-flex:$parameter;
  flex:$parameter;
}

//************************************************************
//    @弹性布局的设置子节点的显示位置;
//************************************************************/
@mixin flexBoxPosition($parameter){

  -webkit-box-ordinal-group: $parameter;
  -o-box-ordinal-group: $parameter;
  -moz-box-ordinal-group: $parameter;
  -ms-box-ordinal-group: $parameter;
  box-ordinal-group: $parameter;

  -webkit-flex-order:$parameter;
  -o-flex-order:$parameter;
  -moz-flex-order:$parameter;
  -ms-flex-order:$parameter;
  flex-order:$parameter;

  -webkit-order: $parameter;
  -o-order: $parameter;
  -moz-order: $parameter;
  -ms-order: $parameter;
  order: $parameter;
}

